import React, { Component } from 'react'

export default class Home extends Component {
    state = {
        list: [
            {
                id: 111,
                title: '商品1'
            },
            {
                id: 222,
                title: '商品2'
            },
            {
                id: 333,
                title: '商品3'
            }
        ]
    }
    pushDetail = (id) => {
        // 不推荐  获取的时候比较麻烦
        // this.props.history.push('/detail')

        // 传参的时候如果是随便写的属性  (刷新会丢失)
        // this.props.history.push({
        //     pathname: "/detail",
        //     ccc: id
        // })

        // 传参的时候 指定state属性 (刷新不会丢失)
        this.props.history.push({
            pathname: "/detail",
            state: id
        })
    }
    render() {
        const { list } = this.state
        return (
            <div>
                {
                    list.map(item => {
                        return <h2 onClick={ () => {
                            this.pushDetail(item.id)
                        }} key = { item.id }>
                            { item.title }
                        </h2>
                    })
                }
            </div>
        )
    }
}
